<template>
  <div class="search-box">
        <p class="head_query">查询</p>
            <div class="top">
                <p>订单编号：</p><el-input v-model="orderNumber" placeholder="请输入菜品名称"></el-input>
                <p>支付状态：</p>
                <el-select v-model="orderStatus" placeholder="请选择">
                    <el-option v-for="item in Status" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
                <p>订单类型：</p>
                <el-select v-model="orderType" placeholder="请选择">
                    <el-option v-for="item in Types" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
            </div>
            <div class="bottom">              
                <el-date-picker v-model="orderTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
                <el-button type="primary" @click="search">查询</el-button>
            </div> 
    </div>
</template>

<script>
export default {
    data(){
        return{
            orderNumber:'',
            Status: [{
            value: '0',
            label: '未付款'
        },  {
            value: '1',
            label: '已付款'
        }, {
            value: '2',
            label: '已退款'
        }],
        Types:[{
            value:'门店订单',
            label:'门店订单',
        },{
            value:'小程序订单',
            label:'小程序订单',
        }],
            orderStatus: '',
            orderType:'',
            orderTime:[],
        }
    },

    methods:{
         
        search(){

            this.axios.post('/order/list',{

                orderNumber:this.orderNumber,
                orderStatus:this.orderStatus,
                orderType:this.orderType,
                startTime:this.orderTime[0],
                endTime:this.orderTime[1],
                
            },).then((res)=>{

                let sta=res.data.data;
                let count=res.data.count;
                this.$emit('sear',{sta:sta,count:count,
                orderNumber:this.orderNumber,
                orderStatus:this.orderStatus,
                orderType:this.orderType,
                startTime:this.orderTime[0],
                endTime:this.orderTime[1]
                });//向父组件传送查询结果
            
            })
        }
    },
    watch:{
        //处理picker 被清除后  值为null的bug
        orderTime(time){
            if(!time){
                this.orderTime=[];
            }
        }
    }
  

   
}
</script>

<style lang="less" scoped>
    *{
        font-family: "微软雅黑";
        font-weight: 400;
    }

    .search-box{
        height: 19.5rem;
        border: 1px solid #dbe0e9 ;
        background: #fff;
        .head_query{
            display: block;
            font-weight:normal;
            font-size: 1.6rem;
            font-style:normal;
            height: 4.5rem;
            display: flex;
            align-items: center;
            padding-left: 2rem;
            background:#F2F2F2;
            border-bottom: 1px solid #dbe0e9;
        }
        .top{
            padding: 2rem 3.5rem;
            display:flex;
            align-items:center;
            p{
                display: inline-block;
                font-size: 1.4rem;
                margin-left: 2rem;
            }
            p:first-child{
                 margin-left: 0;
            }

           
            .el-input{
                width:25%;
                // margin-right: 2rem;
            }
            .el-select{
                width:25%;
                // margin-right: 2rem;
               
            }
        }
        .bottom{
            padding: 0 3.5rem 2rem;
            .el-button{
                margin-left: 2rem;
            }
        }

    }


</style>